body {
  margin: 0;
  background: #333333;
}

#title {
  position: absolute;
  width: 40%;
  height: 10%;

  top: 0;
  left: 30%;
  right: 30%;
  /* background: #222222; */
  color: white;
  font-size: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
}

#time {
  position: absolute;
  /* width: 30%; */
  height: 10%;

  top: 5%;
  right: 5%;
  /* background: #333333; */
  color: white;
  font-size: 20px;
}

#total {
  position: absolute;
  width: 30%;
  height: 45%;

  top: 10%;
  left: 0;
  background: #444444;
}

#add {
  position: absolute;
  width: 30%;
  height: 45%;

  top: 55%;
  left: 0;
  background: #555555;
}

#keyword {
  position: absolute;
  width: 40%;
  height: 30%;

  top: 10%;
  left: 30%;
  right: 30%;
  /* background: #666666; */
  color: white;
}

#map {
  position: absolute;
  width: 40%;
  height: 60%;

  top: 40%;
  left: 30%;
  right: 30%;
  background: #777777;
}

#rank {
  position: absolute;
  width: 30%;
  height: 45%;

  top: 10%;
  right: 0;
  background: #888888;
}

#hot {
  position: absolute;
  width: 30%;
  height: 45%;

  top: 55%;
  right: 0;
  background: #999999;
}

.num {
  width: 25%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gold;
  font-size: 20px;
  margin-top: 20px;
}

.txt {
  width: 25%;
  float: left;
  font-family: "幼圆";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.txt h2 {
  margin: 0;
}
